.main-content {
  margin-top: 1.75rem;

  .post-card {
    &-image {
      position: relative;
      height: 17.5rem;
      margin: 0 auto;
      overflow: hidden;

      &-link {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;

        &-background {
          border-radius: 2px;
          height: 100%;
          background-repeat: no-repeat;
          background-position: 50%;
          background-size: cover;
          transition: transform 250ms ease-in-out;
          &:hover {
            transform: scale(1.2);
          }
        }
      }
    }

    &-content {
      height: 100%;

      &-tag {
        color: $no-focus-color;
        font-size: 0.725rem;

        i {
          font-size: 0.725rem;
        }
      }

      &-title {
        margin: 0.25rem 0 1rem;

        &-link {
          font-size: 1.5rem;
          text-decoration: none;
          color: $main-color;
          transition: all 500ms ease 0ms;

          &:hover {
            color: $primary-active-color;
          }
        }
      }

      &-excerpt {
        letter-spacing: 0.5px;
        line-height: 1.8;
        font-size: .875rem;
      }

      &-meta {

        &-authors {
          &-link {
            margin-left: -1rem;
            width: 2.8rem;
            height: 2.8rem;
            z-index: 1;

            &:first-child {
              margin-left: 0;
            }

            &-avatar {
              object-fit: cover;
              width: 2.8rem;
              height: 2.8rem;
            }
          }
        }

        &-other {
          font-size: 0.725rem;
          color: $no-focus-color;

          &-date {
          }

          &-readtime {
          }
        }
      }
    }
  }
}

@media (min-width: 992px) {
  .main-content {
    .post-card {
      &-image {
        width: 100%;
        height: 100%;
        min-height: 25rem;
      }
    }
  }
}

@media (min-width: 1200px) {
}

@mixin dark-mode {
  .main-content {

    .post-card {
      &-image {
        &-link {
          &-background {
            height: 100%;
            &:before {
              content: "";
              position: absolute;
              background: rgba(0, 0, 0, .5);
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      &-content {
        &-title {
          &-link {
            color: $dark-main-color;

            &:hover {
              color: $dark-main-hover-color;
            }
          }
        }

        &-meta {
          &-authors {
            &-link {
              &:before {
                content: "";
                position: absolute;
                background: rgba(0, 0, 0, .5);
                width: 2.8rem;
                height: 2.8rem;
                border-radius: 50%;
              }

              &-avatar {
                background-color: $dark-background-color;
                border: 1px solid $dark-main-color;
              }
            }
          }

          &-other {
          }
        }
      }
    }
  }

  @media (min-width: 768px) {
    .main-content {
      .post-card {
        &-image {
          &-shadow {
            display: block;
          }
        }
      }
    }
  }
}

@media (prefers-color-scheme: dark) {
  @include dark-mode;
}

[data-theme="dark"] {
  @include dark-mode;
}
